<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>


<body>
  <div id="test"></div>
</body>



<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel"> //必须声明 babel
  class A extends React.Component {
    state = {
      car: '奔驰'
    }
    changgeCar = () => {
      this.setState({
        car: '保时捷'
      })
    }

    render () {
      const { car } = this.state
      return (
        <div>
          <div>A组件的车{car}</div>
          <button onClick={this.changgeCar}>换车</button>
          <B carName={car} />
        </div>

      )
    }
  }
  class B extends React.Component {
    render () {
      return (
        <div>
          <div>父组件组件的车{this.props.carName}</div>
        </div>

      )
    }
  }
  ReactDOM.render(<A />, document.getElementById('test'))
</script>

</html>